<template>

    <!-- 
     我这里有3个权限

        员工  ：只能看到自己
        主管 ：能看到自己  和员工
        boss： 所有的

     //1 用户在输入用户和密码 时候就知道你是谁
     -->
     <div>

          <h2>根据不同的用户，不同的内容</h2>
          <!-- <button v-if="showLimit=='员工'||showLimit=='主管'">员工</button>
          <button v-if="showLimit=='主管'||showLimit=='boss'">主管</button>
          <button v-if="showLimit=='boss'"> boss</button> -->


          <!-- 其他的模块 -->
          <Children1 v-if="changeLimit('children1')"></Children1>
          <Children2 v-if="changeLimit('children2')"></Children2>

          <!-- 自定义指令 -->
          <h2> 自定义指令</h2>
          <!-- 员工 -->
          <Children1 v-limitB='"FinanceChildren1"' ></Children1>
          <Children2 v-limitB='"FinanceChildren2"'></Children2>
     </div>
</template>

<script setup lang="ts">
   // 1 在财务模块中有按钮级权限需要处理
   import Children1 from './Children1.vue'
   import Children2 from './Children2.vue'
   import {changeLimit} from '@/Directives/index'
   import {ref} from 'vue'

   //获取到本地数据
   let limit = sessionStorage.getItem('limit') //当前用户的权限
   let showLimit = ref(limit)
   console.log(changeLimit(),666691);
   

   //写一个公共的方法 =》按钮级的权限表
</script>

<style>

</style>